import { Meta, Canvas, Story, ArgsTable, Source } from '@storybook/addon-docs';
import Checkbox from '@/pkg/rancher-components/src/components/Form/Checkbox/Checkbox';

export const Template = (args, { argTypes }) => ({
  components: { Checkbox },
  props:      Object.keys(argTypes),
  template:   '<Checkbox v-bind="$props" />',
})

<Meta 
  title="Form/Checkbox"
  decorators={[]}
/>

# Checkbox
Checkboxes are used when the user may select any number (zero, one or several) of choices from a list.

### Description

- Always associate a label to every checkbox for good accessibility. Do not include a colon at the end of the label.
- Use a single checkbox when there is a choice between two options that represent status (for example opting in or out).
- Checkboxes should be used when enabling or disabling settings or preferences.
- Use checkboxes when the user needs to select one or multiple items for a group of choices.


<Canvas columns={2}>
  Default
  <Story
    name="Checked"
    args={{
      label: 'Accept term of service',
    }}>
    {Template.bind({})}
  </Story>
  Selected
  <Story
    name="Selected"
    args={{
      label: 'Accept term of service',
      value: true
    }}>
    {Template.bind({})}
  </Story>
  Disabled
  <Story
    name="Disabled"
    args={{
      label: 'Accept term of service',
      disabled: true,
      value: true
    }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Import 
<Source
  language='js'
  code={`
     import Checkbox from '@/pkg/rancher-components/src/components/Form/Checkbox/Checkbox';
  `}
/>


### Props table

<ArgsTable of={Checkbox} />
